<template>
    <div class="jsAccounts">
        <el-dialog title="结算登记" :visible.sync="settleShow" width="1100px" :before-close="handelSetterClose">
           <div class="jgInfo">
                <div class="title_left">
                    结算登记
                </div>
                <div class="border_line">
                    <el-form  v-if="jsShowBox" :inline="true" :model="jsInfoForm" :rules="rulesJsInfo" ref="jsInfoForm" label-width="120px">
                            <el-form-item label="结算时间" prop="settlement_time">
                                <el-date-picker
                                v-model="dateSettle"
                                disabled
                                type="datetime"
                                value-format='yyyy-MM-dd HH:mm:ss'
                                placeholder="选择日期时间"
                                style="width: 170px;"
                                size="mini">
                                </el-date-picker>
                            </el-form-item>
                            <el-form-item label="交割记录" prop="delivery_ids">
                                <span class="headBule" @click="selectJgList">选择</span>
                            </el-form-item>
                            <el-form-item label="实际结算数量" prop="practical_number">
                                <el-input-number v-model="jsInfoForm.practical_number" :precision="2" :step="0.1" size="mini"></el-input-number>
                                <span>吨</span>
                            </el-form-item>
                            <el-form-item label="实际结算金额" prop="practical_price">
                                <el-input-number v-model="jsInfoForm.practical_price" :precision="2" :step="0.1" size="mini"></el-input-number>
                            </el-form-item>

                            <div class="btn_box">
                                    <el-button type="primary" size="small" @click="generateStatement">生成结算单</el-button>
                                    <el-button type="primary" size="small" @click="previewStatement">预览结算单</el-button>
                                    <el-button type="primary" size="small" @click="nextPage">下一步</el-button>
                            </div>
                        

                       
                    </el-form>

                    <div v-else>
                            <span>结算单:</span>
                            <el-upload
                            class="upload-demo"
                            :action="imgurls + '/entrust/Common/upload'"
                            multiple
                            :limit="1"
                            :on-success="handleAvatarSuccess"
                            :file-list="fileList">
                            <el-button size="small" type="primary">选取文件</el-button>
                            <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> -->
                            </el-upload>

                            <div  class="btn_box">
                                    <el-button type="primary" size="small" @click="upPage">上一步</el-button>
                                    <el-button v-if="isStatement" type="primary" size="small" @click="accomplish">完成本次结算</el-button>
                            </div>
                        </div>
                </div>
                
           </div>

           <div class="lot_info">
                <div class="title_left">
                    标的信息
                </div>
                <el-form :inline="true" :model="lotsInfoForm" ref="lotsInfoForm" label-width="120px">
                    <el-form-item label="标的名称:">
                        <el-input v-model="lotsInfoForm.lots_name" :disabled="true" size="mini"></el-input>
                    </el-form-item>
                    <el-form-item label="计量单位:">
                        <el-input v-model="lotsInfoForm.unit" :disabled="true" size="mini"></el-input>
                    </el-form-item>
                    <el-form-item label="成交单价:">
                        <el-input v-model="lotsInfoForm.bidprice" :disabled="true" size="mini"></el-input>
                    </el-form-item>
                    <el-form-item label="处置单位:">
                        <el-input v-model="lotsInfoForm.dispose_unit" :disabled="true" size="mini"></el-input>
                    </el-form-item>
                    <el-form-item label="服务单位:">
                        <el-input v-model="lotsInfoForm.service_name" :disabled="true" size="mini"></el-input>
                    </el-form-item>
                    <el-form-item label="买受人:">
                        <el-input v-model="lotsInfoForm.bidder_name" :disabled="true" size="mini"></el-input>
                    </el-form-item>
                    <el-form-item label="合同上传:">
                        <span v-if="lotsInfoForm.contract.length>0">
                            <span v-for="item in lotsInfoForm.contract" :key="item.id">
                                {{item.file_name}}
                                <i class="el-icon-download" @click="downLoadFile(item.file_path)"></i>
                            </span>
                        </span>
                        <span v-else>
                            <span v-if="!isStatement">暂无附件</span>
                            <span>
                                <el-upload class="upload-demo" :action="imgurls + '/entrust/Common/file'" :on-success="fileSuccessFile"
                                :file-list="fileList_File" :limit="1" multiple>
                                <el-button size="small" type="primary">点击上传</el-button>
                                <div slot="tip" class="el-upload__tip">文件大小不超过10MB</div>
                                </el-upload>
                            </span>
                        </span>
                        
                        
                    </el-form-item>
                </el-form>
           </div>
           <div class="lot_info">
                <div class="title_left">
                    结算记录
                </div>
                <el-table
                    :data="tableData"
                    border
                    style="width: 100%">
                    <el-table-column prop="settlement_time" label="结算时间" width="180">
                    </el-table-column>
                    <el-table-column prop="practical_number" label="实际结算数量" width="120">
                    </el-table-column>
                    <el-table-column prop="practical_price" label="实际结算总额" width="120">
                    </el-table-column>
                    <el-table-column prop="delivery_ids" label="交割记录" width="120">
                    </el-table-column>
                    <el-table-column prop="final_statement" label="结算单">
                        <template  slot-scope="scope">
                            <div class="down_look" v-for="(item,i) in scope.row.final_statement" :key="i">
                                <span class="name_f">{{item.file_name}}</span>
                                <a :href="httpImage+item.file_path" target="_blank" download>
                                    <i class="el-icon-download"></i>
                                </a>
                                <svg-icon icon-class="eye-open" @click="openPic(item.file_path)"/>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作">
                    </el-table-column>
                </el-table>
           </div>
           <!-- <pdfStatement
            style="position: absolute;z-index: -1;right: 20000;top:-20000px"
            /> -->
            <pdfStatement
            id="demo"
            :type="type"
            :lotsName="lotsInfoForm.lots_name"
            :bidprice="lotsInfoForm.bidprice"
            :bidderName="lotsInfoForm.bidder_name"
            :disposeUnit="lotsInfoForm.dispose_unit"
            :practicalNumber="jsInfoForm.practical_number"
            :practicalPrice="jsInfoForm.practical_price"
            style="position: absolute;z-index: -1;right: 20000;top:-20000px"
            />

            <div slot="footer" class="dialog-footer">
                <el-button  size="small" @click="closeAccounts">关 闭</el-button>
                <el-button v-if="!isStatement" type="primary" size="small" @click="cancelSettlement">撤销结算</el-button>
            </div>
        </el-dialog>

        <jgList
        :jgSmallShow="jgSmallShow"
        :idjg="idjg"
        @colseJgList="colseJgList"
        />


        <el-image-viewer style="z-index: 3000;" v-if="showViewer" :on-close="closeViewer" :url-list="urlList" />



        
        

    </div>
   
</template>

<script>
import {statementLedger,completeSettlement} from '@/api/release'
import {dateOrTime,intervalTime} from '@/utils/index'
import htmlToPdf from '@/utils/htmlToPdf'
import jgList from './jgList.vue'
import pdfStatement from './pdfStatement .vue'
export default {
    props:{
        settleShow:[Boolean],
        isStatement:[Boolean],
        idRow:[String,Number],
    },
    components:{
        jgList,pdfStatement,
        'el-image-viewer': () => import('element-ui/packages/image/src/image-viewer')
    },
    data(){
        return{
            idjg:'',
            jgSmallShow:false,
            //结算登记
            jsShowBox:true,
            dateSettle:new Date(), //结算时间
            jsInfoForm:{
                lots_id:"",
                settlement_time:'',
                practical_number:'',
                practical_price:'',
                delivery_ids:'',
            },
            rulesJsInfo:{
                practical_number: [{ required: true, trigger: 'blur', message:'请输入交割数量'}],
                practical_price: [{ required: true, trigger: 'blur', message:'请输入装运车号'}],
                // delivery_ids: [{ required: true, trigger: 'change', message:'请选择装运车号'}],
            },
            final_statement:'',
            fileList:[],//结算单上传
           
            // 标的信息
            lotsInfoForm:{
                lots_name:'',
                unit:"",
                bidprice:"",
                dispose_unit:"",
                service_name:"",
                bidder_name:"",
                contract:[],
            },
            fileList_File:[], //标的合同

            // 结算记录
            tableData:[],
            showViewer:false,
            urlList:[],
            httpImage:'https://www.ympai.net',
            type:false,
        }
    },
    created(){
       
    },
    watch:{
        settleShow:{
            handler(newval,oldval){
                if(newval){
                    this.idjg = this.idRow;
                    this.getPageData();
                }
            }
        }
    },
    methods:{
        getPageData(){
            statementLedger({id:this.idRow}).then(res=>{
                this.lotsInfoForm = res.data.lotsData;
                res.data.statementData.forEach(item =>{
                    item.settlement_time = intervalTime(item.settlement_time);
                })
                this.tableData = res.data.statementData;
            });
        },
        // 生成结算单
        generateStatement(){
            this.$refs.jsInfoForm.validate((valid) => {
                if (valid) {
                    if(this.jsInfoForm.practical_number&&this.jsInfoForm.practical_price){
                        htmlToPdf.downloadPDF(document.querySelector('#demo'), '河北一盟拍卖有限公司拍卖项目结算单',1);
                        this.type=true;
                    }else{
                        this.$message({
                        message: '实际结算数量、实际结算金额都不能为空',
                        type: "warning",
                        });
                        this.type=false;
                    }
                   
                }
            });
        },
        // 预览结算单
        previewStatement(){
            this.$refs.jsInfoForm.validate((valid) => {
                if (valid) {
                    if(this.jsInfoForm.practical_number&&this.jsInfoForm.practical_price){
                        htmlToPdf.downloadPDF(document.querySelector('#demo'), '河北一盟拍卖有限公司拍卖项目结算单',0);
                        this.type=true;
                    }else{
                        this.$message({
                        message: '实际结算数量、实际结算金额都不能为空',
                        type: "warning",
                        });
                        this.type=false;
                    }
                   
                }
            });
           
        },
        //点击下一步
        nextPage(){
            this.$refs.jsInfoForm.validate((valid) => {
                if (valid) {
                    if(this.jsInfoForm.practical_number&&this.jsInfoForm.practical_price){
                        this.jsShowBox = false;
                    }else{
                        this.$message({
                        message: '实际结算数量、实际结算金额都不能为空',
                        type: "warning",
                        });
                    }
                   
                }
            });
           
        },
        //上一步
        upPage(){
            this.jsShowBox = true;
        },
        // 完成本次结算
        accomplish(){
            this.jsInfoForm.lots_id = this.idRow;
            this.jsInfoForm.settlement_time = dateOrTime(this.dateSettle);
            // this.final_statement
            if(this.final_statement){
                var obj ={...this.jsInfoForm,final_statement:this.final_statement}
                completeSettlement(obj).then(res=>{
                    if(res.code == 200){
                        this.$message({
                            message: '成功',
                            type: "success",
                        });
                        this.jsInfoForm.delivery_ids='';
                        this.jsInfoForm.lots_id='';
                        this.jsInfoForm.practical_number='';
                        this.jsInfoForm.practical_price='';
                        this.jsInfoForm.settlement_time='';
                        
                        this.jsShowBox=true;
                        this.final_statement='';
                        this.fileList = [];
                        this.getPageData();
                    }
                })
            }else{
                this.$message({
                    message: '请上传结算单',
                    type: "warning",
                });
            }
        },
// -----------交割记录弹窗---------------------------------
        //打开交割记录弹窗
        selectJgList(){
            this.jgSmallShow = true;
        },
        //关闭交割记录弹窗
        colseJgList(val){
            this.jsInfoForm.delivery_ids =val;
            this.jgSmallShow = false;
        },

        //点击取消
        handelSetterClose(){
            this.jsInfoForm.delivery_ids='';
            this.jsInfoForm.lots_id='';
            this.jsInfoForm.practical_number='';
            this.jsInfoForm.practical_price='';
            this.jsInfoForm.settlement_time='';

            this.final_statement='';
            this.fileList = [];
            this.$emit('closeSettleLog');
        },
        
    //------标的信息  合同上传-----------------------------
        fileSuccessFile(res, file){
            this.$message({
            message: res.msg,
            type: "success",
            });
            this.filesList.push(res.data.id);
        },

        handleAvatarSuccess(res, file) {
            this.final_statement=res.data.id;
        },
    // ----------------------------------
        //下载图片
    
        //预览图片
        openPic(img){
            this.urlList = [img];
            this.showViewer = true;
        },
        closeViewer(){
            this.showViewer = false;
        },
        //关闭
        closeAccounts(){
            this.handelSetterClose();
        },
        //撤销结算
        cancelSettlement(){

        },    
        downLoadFile(urlVal){
            const url = this.imgurls+urlVal;
            window.open(url);
        },
        
    }
}
</script>

<style lang="scss" scoped>
 .jsAccounts{
    .btn_box{
       text-align: right;
    }
    .title_left{
        padding-left: 10px;
        border-left: 5px solid #409EFF;
        
    }
    .headBule{
        color: #409EFF;
        cursor: pointer;
    }

    .jgInfo{
        .border_line{
            border: 1px solid #E4E7ED;
            border-radius: 10px;
            padding: 10px;
            margin: 6px;
            
        }
    }
    

    .down_look{
        color: #409EFF;
        cursor: pointer;
        .name_f{
            display: inline-block;
            width: 150px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            vertical-align: middle;
        }
        .el-icon-download{
            margin-right: 16px;
        }
    }
   
 }
</style>
  